<template>
    <div id="cart-layout" class="cart-layout translateX">
        <div class="head">
            <a href="javascript:;" class="icon-close" @click="close"></a>
            <span>Your Cart</span>
        </div>
        <div class="block-contnet">
            <div class="block-cart-info">
                <div class="block-cart-list">
                    <div v-for="(item,index) in list" :key="index" class="media">
                        <router-link :to="'/product/view/'+jumpUrl(item.product_name)" class="pull-left">
                            <img class="media-object" :src="item.image_path">
                        </router-link>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <router-link :to="'/product/view/'+jumpUrl(item.product_name)" v-text="item.product_name"></router-link>
                            </h5>
                            <div class="media-qty">
                                <span class="pull-right">
                                    <strong>
                                        <span class="price">{{(item.price * item.product_qty) | Currency}}</span>
                                    </strong>
                                </span>
                                <span v-text="'Qty: '+item.product_qty"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-show="list.length > 0" class="block-cart-buttom">
                <div class="cart-total">
                    Sub Total
                    <span class="price">{{totalPrice | Currency}}</span>
                </div>
                <div class="block-cart-btn text-center text-uppercase">
                    <router-link to="/cart">checkout</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
import api from '../../http'
export default {
    mixins: [mixin],
    props: ['showCartSlider'],
    data() {
        return {
            list: []
        }
    },
    computed: {
        totalPrice() { // 计算总价
            return this.setTotal(this.list)
        }
    },
    mounted() {
        document.addEventListener('click', (event) => {
            let target = event.target
            while (target && (!target.id || target.id !== 'cart-layout')) {
                target = target.parentNode
            }
            if (!target) {
                this.close()
            }
        })
        api.GetMiniCart().then(response => {
            this.list = response.data.lists
        })
    },
    methods: {
        cartBlockHeight() {
            let cart_layout = document.getElementsByClassName('cart-layout')[0]
            let cart_block = cart_layout.getElementsByClassName('block-cart-info')[0]
            let total_height = cart_layout.clientHeight
            let head_height = 42
            let foot_height = 125
            let box_height = total_height - head_height - foot_height
            cart_block.style.height = box_height + 'px'
        },
        close() {
            this.$parent.showCartSlider = false
        }
    },
    watch: {
        showCartSlider(newval, oldval) {
            if (newval) {
                this.cartBlockHeight()
                window.addEventListener('resize', () => {
                    this.cartBlockHeight()
                })
            }
        }
    }
}
</script>
<style>
.cart-layout {
    position: fixed;
    right: -375px;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 375px;
    height: 100%
}

.cart-layout .head {
    padding: 11px 14px;
    height: 42px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    background: #F41121;
}

.cart-layout .icon-close {
    float: left;
    color: #fff;
}

.cart-layout .block-cart-info,
.cart-layout .block-cart-buttom {
    border-left: 1px solid #d6d6d6;
}

.cart-layout .block-cart-info {
    padding: 15px;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.cart-layout .block-cart-info::-webkit-scrollbar {
    width: 2px;
    background-color: #fff;
}













































/*定义滑块 内阴影+圆角*/

.cart-layout .block-cart-info::-webkit-scrollbar-thumb {
    background-color: #888;
}

.cart-layout .waiting {
    margin-top: 20px;
}

.block-cart-info .media {
    border-bottom: 1px dotted #666;
    padding-bottom: 10px;
    font-size: 12px;
}

.block-cart-info .media-qty {
    padding: 5px 0;
}

.block-cart-info .media:last-of-type {
    border-bottom: none;
}

.block-cart-buttom .cart-total {
    padding: 15px 20px;
    border-width: 1px 0;
    border-color: #d6d6d6;
    border-style: solid;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    background: #efefef;
}

.block-cart-buttom .cart-total .price {
    float: right;
}

.block-cart-btn {
    padding: 15px;
}

.block-cart-btn a {
    display: block;
    border: 1px solid #c70000;
    width: 100%;
    height: 43px;
    line-height: 43px;
    color: #fff;
    text-transform: uppercase;
    background: #f41121;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.block-cart-btn a:hover {
    background: #ca0000;
}

@media (max-width: 767px) {
    .cart-layout {
        right: -100%;
        width: 100%;
    }
}
</style>
